<template>
    <component is="a-modal" v-model:visible="visible" :width="1000" :title="title" :mask-closable="false"
      :ok-loading="loading" @cancel="close" @before-ok="submit">
      <!-- 表单信息 start -->
      <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true" style="min-height: 30vh;">
        <a-spin :loading="loading" tip="数据加载中···">
          <div style="margin-left: 20px;color:red;margin-bottom: 15px;">注意事项：</div>
          <div style="margin-left: 20px;color:red;margin-bottom: 15px;">除了发网云仓的订单会同步撤销，</div>
          <div style="margin-left: 20px;color:red;margin-bottom: 15px;">其他云仓已经推送过去的订单，需手动至对应的云仓后台取消，否则可能造成重复推送。</div>
          <div style="margin-left: 20px;color:red;margin-bottom: 15px;">撤销后，将依据最新的收货地址重新发货。</div>

        
        <div>
            <a-form-item label="姓" field="last_name">
              <a-input v-model="formData.last_name" placeholder="请输入" style="width:80%" />
            </a-form-item>
            <a-form-item label="名" field="first_name">
              <a-input v-model="formData.first_name" placeholder="请输入" style="width:80%"  />
            </a-form-item>
            <a-form-item label="电话" field="mobile">
              <a-input v-model="formData.mobile" placeholder="请输入" style="width:80%" />
            </a-form-item>
            <a-form-item label="邮箱" field="email">
              <a-input v-model="formData.email" placeholder="请输入" style="width:80%" />
            </a-form-item>
            <a-form-item label="邮编" field="postcode">
              <a-input v-model="formData.postcode" placeholder="请输入"  style="width:80%"  />
            </a-form-item>
            <a-form-item label="税号" field="tax">
              <a-input v-model="formData.tax" placeholder="请输入" style="width:80%"  />
              <div style="margin-left: 20px;">巴西等必填</div>
            </a-form-item>
            <a-form-item label="国际/地区" field="country">
              <a-select v-model="formData.country" placeholder="请选择"  @change="getChange()" style="width:80%">
                  <a-option v-for="item in paramsData.countryList" :key="item.id" :label="item.name" :value="item.id"></a-option>
              </a-select>
            </a-form-item>
                <a-form-item label="省份" field="province">
                <a-input v-model="formData.province" placeholder="请输入" style="width:80%"  />
                </a-form-item>
                <a-form-item label="地市" field="city">
                <a-input v-model="formData.city" placeholder="请输入" style="width:80%"  />
                </a-form-item>
            <a-form-item label="详细地址" field="address">
              <a-input v-model="formData.address" placeholder="请输入" style="width:80%" />
            </a-form-item>
            <a-form-item label="操作密码" field="admin_pay_password">
                <a-input v-model="formData.admin_pay_password" type="password" show-password placeholder="请输入" style="width:80%"></a-input>
            </a-form-item>
        </div>
    </a-spin>
      </a-form>
      <!-- 表单信息 end -->
    </component>
  </template>
  
  <script setup>
  import { ref, reactive, computed, watch } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import AsApi from '@/api/system/afterSale'
  import ENUMS from '@/utils/enums'
  import { throttle } from 'lodash'
  import tool from '@/utils/tool'
  const paramsData = ref({})
  // 获取角色组列表
  const getParams = async () => {
    const { data } = await AsApi.cancel_delivery_again_params(formData.id)
    paramsData.value = { ...data }
        paramsData.value?.countryList?.forEach(itm=>{
            if(itm.country_code==formData.country_code){             
                formData.country=itm.id
            }
        })
  }
  const emit = defineEmits(['success'])
  // 引用定义
  const formRef = ref()
  const mode = ref('')
  const visible = ref(false)
  const loading = ref(false)
  const province=ref([])
  const city=ref([])
  const district=ref([])
  let title = computed(() => {
    return '撤销云仓发货'
  })
  // 表单信息
  const formData = reactive({  
    last_name:'',
    first_name:'',
    mobile:'',
    email:'',
    postcode:'',
    tax:'',
    country:'',
    province:'',
    city:'',
    district:'',
    address:'',
    admin_pay_password:'',
    country_code:'',
    id: "",
  })
  
  // 验证规则
  const rules = ref({
        admin_pay_password: [{ required: true, message: '请输入' }],
        province: [{ required: true, message: '请输入' }],
        mobile: [{ required: true, message: '请输入' }],
        address: [{ required: true, message: '请输入' }],
        first_name: [{ required: true, message: '请输入' }],
        last_name: [{ required: true, message: '请输入' }],
        email: [{ required: true, message: '请输入' }],
        postcode: [{ required: true, message: '请输入' }],
        tax: [{ required: false, message: '请输入' }],
        city: [{ required: true, message: '请选择' }],
        district: [{ required: true, message: '请选择' }],
        country: [{ required: true, message: '请选择' }],
  });
  // 打开弹框
  const open = async (type = '', data) => {
    console.log('data',data);
    loading.value=true
    formRef.value?.resetFields()
    mode.value = type
    visible.value = true
    setFormData(data?.address)
    formData.id = data.id
    await getParams()
    loading.value=false
    
    
  }
 
  const getChange=()=>{
        formData.province=''
        formData.city=''
        formData.district=''
        // province.value=[]
        // if(countryId==100000){//cn
        //     province.value=[...paramsData.value.CNCity]
        // }else if(countryId==6000000){//than
        //     province.value=[...paramsData.value.THCity]
        // }else if(countryId==3000000){//japen
        //     province.value=[...paramsData.value.JPCity]
        // }
  }
  const ProvinceChange=(e)=>{      
    province.value?.forEach(item=>{
        if(item.name==e ){
            city.value=item.child
        }
    })      
  }
  const cityChange=(e)=>{      
    city.value?.forEach(item=>{
        if(item.name==e ){
            district.value=item.child
        }
    })      
  }
  // 设置数据
  const setFormData = async (data) => {
    for (const key in formData) {
      if (data[key] != null && data[key] != undefined) {
        formData[key] = data[key]
      }
    }
  }
  
  // 数据保存
  const submit = throttle(async (done) => {
    const validate = await formRef.value?.validate()
    if (!validate) {
      loading.value = true
      try {
        let data = { ...formData }
        let result = {}
           
          result = await AsApi.cancel_delivery_again(data)
        
        if (result.code === 200) {
          Message.success(result.msg||'操作成功')
          emit('success')
          done(true)
        }
        // 防止连续点击提交
        setTimeout(() => {
          loading.value = false
        }, 500)
      } catch {
        loading.value = false
      }
    }
    done(false)
  }, 100)
  
  // 关闭弹窗
  const close = () => (visible.value = false)
  
  defineExpose({ open, setFormData })
  </script>
  